<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>SHIN SEUNG HUN</title>
	<link href="/resources/css/base.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/resources/js/jquery.js"></script>
	<script type="text/javascript" src="/resources/js/jquery.ajax.js"></script>
	<c:import url="/resources/js/purchase_js.jsp"></c:import>
	<script type="text/javascript">

	</script>
</head>
<body>
<div id="wrapper">
	<!-- container -->
	<div id="container_sub">
		<h1><img src="/resources/images/img_ticketing_top.jpg" alt="THE SHIN SEUNG HUN JAPAN LIVE 2013　～GREAT WAVE～" /></h1>
		<div class="content_sub">
			<h2>■注文内容</h2>
			<table class="tb_type1">
				<colgroup>
					<col width="*" /><col width="100" /><col width="100" /><col width="100" /><col width="100" /><col width="100" />
				</colgroup>
				<thead>
					<tr>
						<th class="fst">THE SHIN SEUNG HUN JAPAN LIVE 2013<br />～GREAT WAVE～</th>

						<th>購入公演</th>
						<th>枚数</th>
						<th>価格（税込）</th>
						<th>送料</th>
						<th>合計</th>
					</tr>
				</thead>

				<tfoot>
					<tr>
						<th colspan="4"><strong class="point_r">※チケットの販売は、各公演お一人様4枚までとさせていただきます。</strong></th>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${deliveryPrice}" /></td>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${(ticket.onceTicket * ticketPrice) + (ticket.twiceTicket * ticketPrice)}" /></td>
					</tr>
					<tr>
						<th colspan="4">合計（送料込）</th>
						<td></td>
						<td><strong class="point_r"><fmt:formatNumber type="number" pattern="#,###" value="${(ticket.onceTicket * ticketPrice) + (ticket.twiceTicket * ticketPrice) + deliveryPrice}" /></strong></td>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<th rowspan="2" class="banner"><img src="/resources/images/img_banner1.jpg" alt="SHIN SEUNG HUN LIVE IN TOKYO" /></th>
						<td>第1回公演</td>
						<td>${ticket.onceTicket}数</td>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${ticketPrice}" /></td>
						<td>別</td>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${ticket.onceTicket * ticketPrice}" /></td>
					</tr>
					<tr class="last">
						<td>第2回公演</td>
						<td>${ticket.twiceTicket}数</td>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${ticketPrice}" /></td>
						<td>別</td>
						<td><fmt:formatNumber type="number" pattern="#,###" value="${ticket.twiceTicket * ticketPrice}" /></td>
					</tr>
				</tbody>
			</table>
			<!--
			<div class="pointNotice">
				<p>※入力に誤りがないか、再度ご確認ください。</p>
				「フリガナ（名）」はカタカナで入力してください。/ 「メールアドレス」に誤りがあります。もう一度確認ください。
			</div>
			-->
			<h2>■お届け先情報入力</h2>
			<form id="purchaseForm" method="post" action="/checkPurchase.do">
				<input type="hidden" name="onceTicket" value="${ticket.onceTicket}">
				<input type="hidden" name="twiceTicket" value="${ticket.twiceTicket}">
				<table class="tb_type2">
					<colgroup>
						<col width="140" /><col width="*" />
					</colgroup>
					<tr class="fst">
						<th>お名前<strong class="point_r">※</strong></th>
						<td>
							姓  <input type="text" size="4" name="userNameF" value="${ticket.userNameF}">
							名  <input type="text" size="4" name="userNameS" value="${ticket.userNameS}">
							フリガナ　 姓 <input type="text" size="4" name="hiraganaF" value="${ticket.hiraganaF}">
							名  <input type="text" size="4" name="hiraganaS" value="${ticket.hiraganaS}">
						</td>
					</tr>
					<tr>
						<th>住所<strong class="point_r">※</strong></th>
						<td>
							<span>郵便番号</span>
							<input type="text" size="4" name="postAdd1" value="${postAdd1}" onkeyup="javascript:chkStr(this);"> -
							<input type="text" size="6" name="postAdd2"  value="${postAdd2}" onkeyup="javascript:chkStr(this);">
							<input type="hidden" name="postAdd" value="${ticket.postAdd}">
						</td>
					</tr>
					<tr class="add_detail">
						<th></th>
						<td>
							<span class="fix">都道府県</span>
							<select name="addr1">
								<option value="---">▼選択してください</option>
								<c:forEach var="addr1" items="${addrList}">
									<option value="${addr1}" <c:if test="${ticket.addr1 eq addr1}">selected</c:if>>${addr1}</option>
								</c:forEach>
							</select>
							<br /><br />
							<span class="fix">郡市区</span>
							<input type="text" size="50" name="addr2" value="${ticket.addr2}"/>
							<br /><br />
							<span class="fix">その以後の住所</span>
							<input type="text" size="50" name="addr3" value="${ticket.addr3}"/>
							<br /><br />
							<p class="point_r"><strong>※チケットを確実にお届けするために必要なものですので、正確にご入力ください。</strong></p></td>
					</tr>
					<tr>
						<th>携帯電話番号<strong class="point_r">※</strong></th>
						<td>
							<div style="float: left;">
							<input type="text" size="4" name="phone1" value="${phone1}" onkeyup="javascript:chkStr(this);"> -
							<input type="text" size="4" name="phone2" value="${phone2}" onkeyup="javascript:chkStr(this);"> -
							<input type="text" size="6" name="phone3" value="${phone3}" onkeyup="javascript:chkStr(this);" >
							<input type="hidden" name="phone" value="${ticket.phone}">
							</div>

							<span class="point_r telCommt" style="margin-left: 20px;">
								※<strong>日常連絡可能</strong>な番号をご記入ください。<br />
								※お客様の<strong>携帯番号がご予約番号</strong>になります。
							</span>
						</td>
					</tr>
					<tr>
						<th>E-mail<strong class="point_r">※</strong></th>
						<td style="height: 10px;">
						   <input type="hidden" name="userEmail" value="${ticket.userEmail}"/>
	                       <input type="text" size="16" name="userEmail1_1" value="${userEmail1_1}"/> ＠
	                       <input type="text" size="26" name="userEmail1_2" value="${userEmail1_2}"/><br /><br />
	                       <div style="float: left;">
	                       <input type="text" size="16" name="userEmail2_1" value="${userEmail2_1}"/> ＠
	                       <input type="text" size="26" name="userEmail2_2" value="${userEmail2_2}"/>
	                       </div>

	                       <span class="point_r emailCommt" style="margin-left: 20px; width: 400px;" >
	                       		※メールアドレスはPC<strong>サイトメール</strong>で入力してください。　<br />
	                       		※<strong>確認</strong>のためにもう一度メールアドレスを入力してください。
	                       </span>

						</td>
					</tr>
					<tr>
						<th>会員ＩＤ</th>
						<td><input type="text" size="30" name="userId" value="${ticket.userId}"/></td>
					</tr>
					<tr class="notice">
						<th>注意事項</th>
						<td>
							<p>※お席は選べません。全て抽選となり当日入場時のご案内となります。</p>
							<p>※入金後のキャンセルは出来ません。チケット代（その他手数料含む）の返金もいたしません。</p>
						</td>
					</tr>
				</table>
			</form>

			<div class="c mt40"><img src="/resources/images/img_btn1.gif" alt="確認" onclick="javascript:goCheckPurchase();" style="cursor: pointer;"/></div>
			<!-- <div class="c mt40"><a href="#"><img src="/resources/images/img_btn2.gif" alt="内容確認画面へ" /></a></div> -->

		</div><!--//content_sub-->

	</div><!--//container_sub-->

	<div class="footer"><c:import url="footer.jsp"/></div><!--//footer-->

</div>

</body>
</html>